{% extends "base.html" %}
{% block title %}{{ config.APP_NAME }} - Datagrid{% endblock %}
{% block body %}
<style>
    body {padding: 0px;}
    {% if is_desktop_mode and is_linux %}
    .alertify .ajs-dimmer,.alertify .ajs-modal{-webkit-transform: none;}
    .alertify-notifier{-webkit-transform: none;}
    .alertify-notifier .ajs-message{-webkit-transform: none;}
    .alertify .ajs-dialog.ajs-shake{-webkit-animation-name: none;}
    .sql-editor-busy-icon.fa-pulse{-webkit-animation: none;}
    {% endif %}

    {# Note: If we will display connection status then we have to provide some
    space to display status icon else we can use all the space available #}
    .editor-title {
      width:{% if display_connection_status -%} calc(100% - 43px)
    {% else %} 100% {%- endif %};
    }
</style>
<div id="main-editor_panel">
    <div id="fetching_data" class="wcLoadingIconContainer sql-editor-busy-fetching hide">
        <div class="wcLoadingBackground"></div>
        <span class="sql-editor-busy-icon wcLoadingIcon fa fa-spinner fa-pulse"></span>
        <span class="sql-editor-busy-text wcLoadingLabel"></span>
    </div>
    <div class="sql-editor">
        <div id="btn-toolbar" class="pg-prop-btn-group bg-gray-2 border-gray-3" role="toolbar" aria-label="">
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-load-file" type="button" class="btn btn-default btn-load-file"
                        title="{{ _('Open File') }}{{ _(' (accesskey+{0})'.format(key.open_file.upper())) }}"
                        accesskey="{{key.open_file}}"
                        tabindex="0">
                    <i class="fa fa-folder-open-o" aria-hidden="true"></i>
                </button>
                <button id="btn-save" type="button" class="btn btn-default"
                        title="{{ _('Save') }}{{ _(' (accesskey+{0})'.format(key.save_file.upper())) }}"
                        accesskey="{{key.save_file}}"
                        disabled>
                    <i class="fa fa-floppy-o" aria-hidden="true" tabindex="0"></i>
                </button>
                <button id="btn-file-menu-dropdown" type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled
                        tabindex="0">
                    <span class="caret"></span> <span class="sr-only">{{ _('Toggle Dropdown') }}</span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a id="btn-file-menu-save" href="#" tabindex="0">
                            <span>{{ _('Save') }}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-file-menu-save-as" href="#" tabindex="0">
                            <span>{{ _('Save As') }}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-find" type="button" class="btn btn-default" title="{{ _('Find (Ctrl/Cmd+F)') }}">
                    <i class="fa fa-search" aria-hidden="true" tabindex="0"></i>
                </button>
                <button id="btn-find-menu-dropdown" type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        title="{{ _('Find options') }}{{ _(' (accesskey+{0})'.format(key.find_options.upper())) }}"
                        accesskey="{{key.find_options}}"
                        tabindex="0">
                    <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a id="btn-find-menu-find" href="#" tabindex="0">
                            <span> {{ _('Find') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+F)') }}
                            {% else %}
                                 {{ _(' (Ctrl+F)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-find-menu-find-next" href="#" tabindex="0">
                            <span> {{ _('Find Next') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+G)') }}
                            {% else %}
                                 {{ _(' (Ctrl+G)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-find-menu-find-previous" href="#" tabindex="0">
                            <span> {{ _('Find Previous') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+Shift+G)') }}
                            {% else %}
                                 {{ _(' (Ctrl+Shift+G)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-find-menu-find-persistent" href="#" tabindex="0">
                            <span>{{ _('Persistent Find') }}</span>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a id="btn-find-menu-replace" href="#" tabindex="0">
                            <span> {{ _('Replace') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+Shift+F)') }}
                            {% else %}
                                 {{ _(' (Ctrl+Shift+F)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-find-menu-replace-all" href="#" tabindex="0">
                            <span>{{ _('Replace All') }}</span>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a id="btn-find-menu-jump" href="#" tabindex="0">
                            <span>{{ _('Jump (Alt+G)') }}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-copy-row" type="button" class="btn btn-default"
                        title="{{ _('Copy') }}{{ _(' (accesskey+{0})'.format(key.copy_row.upper())) }}"
                        accesskey="{{key.copy_row}}"
                        tabindex="0" disabled>
                    <i class="fa fa-files-o" aria-hidden="true"></i>
                </button>
                <button id="btn-paste-row" type="button" class="btn btn-default"
                        title="{{ _('Paste') }}{{ _(' (accesskey+{0})'.format(key.paste_row.upper())) }}"
                        accesskey="{{key.paste_row}}"
                        tabindex="0" disabled>
                    <i class="fa fa-clipboard" aria-hidden="true"></i>
                </button>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-delete-row" type="button" class="btn btn-default"
                        title="{{ _('Delete') }}{{ _(' (accesskey+{0})'.format(key.delete_row.upper())) }}"
                        accesskey="{{key.delete_row}}"
                        tabindex="0" disabled>
                    <i class="fa fa-trash" aria-hidden="true"></i>
                </button>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-edit-dropdown" type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        title="{{ _('Edit') }}" tabindex="0">
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                    <span class="caret"></span> <span class="sr-only">{{ _('Toggle Dropdown') }}</span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a id="btn-indent-code" href="#" tabindex="0">
                            <span> {{ _('Indent Selection (Tab)') }} </span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-unindent-code" href="#" tabindex="0">
                            <span> {{ _('Unindent Selection (Shift+Tab)') }} </span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-comment-line" href="#" tabindex="0">
                            <span> {{ _('Inline Comment Selection') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+/)') }}
                            {% else %}
                                 {{ _(' (Ctrl+/)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-uncomment-line" href="#" tabindex="0">
                            <span> {{ _('Inline Uncomment Selection') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Cmd+.)') }}
                            {% else %}
                                 {{ _(' (Ctrl+.)') }}{%- endif %}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-toggle-comment-block" href="#" tabindex="0">
                            <span> {{ _('Block Comment/Uncomment Selection') }}{% if client_platform == 'macos' -%}
                                 {{ _(' (Shift+Cmd+/)') }}
                            {% else %}
                                 {{ _(' (Shift+Ctrl+/)') }}{%- endif %}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-filter" type="button" class="btn btn-default"
                        title="{{ _('Filter') }}{{ _(' (accesskey+{0})'.format(key.filter_dialog.upper())) }}"
                        accesskey="{{key.filter_dialog}}"
                        tabindex="0" disabled>
                    <i class="fa fa-filter" aria-hidden="true"></i>
                </button>
                <button id="btn-filter-dropdown" type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        title="{{ _('Filter options') }}{{ _(' (accesskey+{0})'.format(key.filter_options.upper())) }}"
                        accesskey="{{key.filter_options}}"
                        disabled tabindex="0">
                    <span class="caret"></span> <span class="sr-only">{{ _('Toggle Dropdown') }}</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li>
                        <a id="btn-filter-menu" href="#" tabindex="0">{{ _('Sort/Filter') }}</a>
                        <a id="btn-include-filter" href="#" tabindex="0">{{ _('Filter by Selection') }}</a>
                        <a id="btn-exclude-filter" href="#" tabindex="0">{{ _('Exclude by Selection') }}</a>
                        <a id="btn-remove-filter" href="#" tabindex="0">{{ _('Remove Sort/Filter') }}</a>
                    </li>
                </ul>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <select class="limit" style="height: 30px; width: 90px;" disabled
                        title="{{ _('Rows limit') }}{{ _(' (accesskey+{0})'.format(key.rows_limit.upper())) }}"
                        accesskey="{{key.rows_limit}}"
                        tabindex="0">
                    <option value="-1">{{ _('No limit') }}</option>
                    <option value="1000">{{ _('1000 rows') }}</option>
                    <option value="500">{{ _('500 rows') }}</option>
                    <option value="100">{{ _('100 rows') }}</option>
                </select>
            </div>

            <div class="btn-group" role="group" aria-label="">
                <button id="btn-flash" data-test-selector="execute-refresh-button" type="button" class="btn btn-default" style="width: 40px;"
                        title="{{ _('Execute/Refresh') }}{{ _(' ({0})'.format(get_shortcut_text(shortcuts.execute_query))) }}"
                        tabindex="0">
                    <i class="fa fa-bolt" aria-hidden="true"></i>
                </button>
                <button id="btn-query-dropdown" type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        accesskey="{{key.execute_options}}"
                        title="{{ _('Execute options') }}{{ _(' (accesskey+{0})'.format(key.execute_options.upper())) }}"
                        tabindex="0">
                    <span class="caret"></span> <span class="sr-only">{{ _('Toggle Dropdown') }}</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a id="btn-flash-menu" href="#" tabindex="0">
                            <span>{{ _('Execute/Refresh') }}{{ _(' ({0})'.format(get_shortcut_text(shortcuts.execute_query))) }}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-explain" href="#" tabindex="0">
                            <span>{{ _('Explain') }}{{ _(' ({0})'.format(get_shortcut_text(shortcuts.explain_query))) }}</span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-explain-analyze" href="#" tabindex="0">
                            <span>{{ _('Explain Analyze') }}{{ _(' ({0})'.format(get_shortcut_text(shortcuts.explain_analyze_query))) }}</span>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-submenu">
                        <a href="#" tabindex="0">{{ _('Explain Options') }}</a>
                        <ul class="dropdown-menu">
                            <li>
                                <a id="btn-explain-verbose" href="#" class="noclose" tabindex="0">
                                    <i class="explain-verbose fa fa-check visibility-hidden" aria-hidden="true"></i>
                                    <span> {{ _('Verbose') }} </span>
                                </a>
                            </li>
                            <li>
                                <a id="btn-explain-costs" href="#" class="noclose" tabindex="0">
                                    <i class="explain-costs fa fa-check visibility-hidden" aria-hidden="true"></i>
                                    <span> {{ _('Costs') }} </span>
                                </a>
                            </li>
                            <li>
                                <a id="btn-explain-buffers" href="#" class="noclose" tabindex="0">
                                    <i class="explain-buffers fa fa-check visibility-hidden" aria-hidden="true"></i>
                                    <span> {{ _('Buffers') }} </span>
                                </a>
                            </li>
                            <li>
                                <a id="btn-explain-timing" href="#" class="noclose" tabindex="0">
                                    <i class="explain-timing fa fa-check visibility-hidden" aria-hidden="true"></i>
                                    <span> {{ _('Timing') }} </span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a id="btn-auto-commit" href="#" tabindex="0">
                            <i class="auto-commit fa fa-check visibility-hidden" aria-hidden="true"></i>
                            <span> {{ _('Auto commit?') }} </span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-auto-rollback" href="#" tabindex="0">
                            <i class="auto-rollback fa fa-check visibility-hidden" aria-hidden="true"></i>
                            <span> {{ _('Auto rollback?') }} </span>
                        </a>
                    </li>
                </ul>
                <button id="btn-cancel-query" type="button" class="btn btn-default"
                        title="{{ _('Cancel query') }}{{ _(' (accesskey+{0})'.format(key.cancel_query.upper())) }}"
                        accesskey="{{key.cancel_query}}"
                        tabindex="0" disabled >
                    <i class="fa fa-stop" aria-hidden="true"></i>
                </button>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-clear-dropdown" type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                        title="{{ _('Clear') }}{{ _(' (accesskey+{0})'.format(key.clear_options.upper())) }}"
                        accesskey="{{key.clear_options}}"
                        tabindex="0">
                    <i class="fa fa-eraser" aria-hidden="true"></i>
                    <span class="caret"></span> <span class="sr-only">{{ _('Toggle Dropdown') }}</span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a id="btn-clear" href="#" tabindex="0">
                            <span> {{ _('Clear Query Window') }} </span>
                        </a>
                    </li>
                    <li>
                        <a id="btn-clear-history" href="#" tabindex="0">
                            <span> {{ _('Clear History') }} </span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button id="btn-download" type="button" class="btn btn-default"
                        title="{{ _('Download as CSV') }}{{ _(' ({0})'.format(get_shortcut_text(shortcuts.download_csv))) }}"
                        tabindex="0">
                    <i class="fa fa-download" aria-hidden="true"></i>
                </button>
            </div>
        </div>

        <div class="connection_status_wrapper">
            {% if display_connection_status %}
            <div style="display: inline-block;"
                 title="{{ _('Connection status (click for details) (accesskey+{0})'.format(key.conn_status.upper())) }}">
                <div class="connection_status" data-container="body"
                     data-toggle="popover" data-placement="bottom"
                     data-content=""
                     data-panel-visible="visible"
                     accesskey="{{key.conn_status}}"
                     tabindex="0">
                    <i class="fa-custom fa-query-tool-disconnected" aria-hidden="true"
                        title="{{ _('Connection status (click for details) (accesskey+{0})'.format(key.conn_status.upper())) }}">
                    </i>
                </div>
            </div>
            {% endif %}
            <div class="editor-title"
                 style="background-color: {% if fgcolor %}{{ bgcolor or '#FFFFFF' }}{% else %}{{ bgcolor or '#2C76B4' }}{% endif %}; color: {{ fgcolor or 'white' }};"></div>
        </div>
        <div id="editor-panel" tabindex="0"></div>
        <iframe id="download-csv" style="display:none"></iframe>
    </div>
</div>
{% endblock %}

{% block init_script %}
	require(['sources/generated/sqleditor'], function(ctx) {
    var $ = pgAdmin.SqlEditor.jquery,
        S = pgAdmin.SqlEditor.S,
        editorPanel = $('.sql-editor'),
        loadingDiv = $('#fetching_data'),
        msgDiv = loadingDiv.find('.sql-editor-busy-text');

    // Register unload event on window close.
    window.onbeforeunload = function(ev) {
      $.ajax({
        url: "{{ url_for('datagrid.index') }}" + "close/" + {{ uniqueId }},
        method: 'GET'
      });
    };

    // Get the controller object from pgAdmin.SqlEditor
    var sqlEditorController = pgAdmin.SqlEditor.create(editorPanel);

    // Listen on events to show/hide loading-icon and change messages.
    sqlEditorController.on('pgadmin-sqleditor:loading-icon:message', function(msg) {
      msgDiv.text(msg);
      }).on('pgadmin-sqleditor:loading-icon:show', function(msg) {
        loadingDiv.removeClass('hide');
        msgDiv.text(msg);
        }).on('pgadmin-sqleditor:loading-icon:hide', function() {
          if (!loadingDiv.hasClass('hide')) {
          loadingDiv.addClass('hide');
          }
          });
    {% if script_type_url %}
        var script_type_url = '{{ script_type_url }}';
    {% else %}
        var script_type_url = '';
    {% endif %}
    // Start the query tool.
    sqlEditorController.start(
        {{ uniqueId }},
        {{ is_query_tool }},
        "{{ editor_title }}",
        script_type_url,
        {{ is_new_browser_tab }},
        "{{ server_type }}",
        {{ prompt_save_changes }},
        {{ url_params|safe}}
    );
});
{% endblock %}
